<template>
  <div class="searchGoodsContainer">
    <div class="searchGoodsAll">
      <div class="searchGoodsMain">
        <div class="searchGoodsMainTop">
          <van-dropdown-menu active-color="#ee0a24">
            <van-dropdown-item title="综合" disabled></van-dropdown-item>
            <van-dropdown-item title="价格" ref="allPrice">
              <van-cell title="筛选">
                <template #right-icon>
                  <input
                    class="searchGoodsMainInput"
                    v-model="minPrice"
                    type="text"
                    placeholder="最低价"
                  />
                  —
                  <input
                    class="searchGoodsMainInput"
                    v-model="maxPrice"
                    type="text"
                    placeholder="最高价"
                  />
                </template>
              </van-cell>
              <van-cell title="排序">
                <template #right-icon>
                  <van-button
                    class="searchGoodsMainSpan"
                    :class="state === '1' && 'active'"
                    @click="changeState('1')"
                    >从低到高</van-button
                  >
                  <van-button
                    class="searchGoodsMainSpan"
                    :class="state === '0' && 'active'"
                    @click="changeState('0')"
                    >从高到低</van-button
                  >
                </template>
              </van-cell>
              <div style="padding: 5px 0px">
                <van-button class="searchGoodsMainButton" square type="default" @click="offMenu"
                  >取消</van-button
                >
                <van-button
                  class="searchGoodsMainButton searchGoodsMainButtonright"
                  square
                  type="default"
                  @click="onSure"
                  >确认</van-button
                >
              </div>
            </van-dropdown-item>
            <van-dropdown-item title="分类">
              <van-tag
                plain
                :text-color="heightLight === index ? 'red' : '#333333'"
                :color="heightLight === index ? 'red' : '#858585'"
                type="primary"
                size="large"
                class="searchGoodsMainTag"
                v-for="(catelist, index) in categoryL1List"
                :key="catelist.id"
                @click="changeHeightLight(index)"
                >{{ catelist.name }}</van-tag
              >
            </van-dropdown-item>
          </van-dropdown-menu>
        </div>
        <!-- 主体 -->
        <div class="searchGoodsMainBottom">
          <div
            class="searchGoodsMainBottomItem"
            v-for="(searchGoodsItem, index) in goodsList"
            :key="searchGoodsItem.id"
          >
            <img class="searchGoodsMainBottomItemImg" :src="searchGoodsItem.listPicUrl" alt="" />
            <span class="searchGoodsMainBottomItemSpan">{{ searchGoodsItem.name }}</span>
            <div class="searchGoodsMainBottomItemPrice">
              <span class="searchGoodsMainBottomItemPriceLeft"
                >￥{{ searchGoodsItem.retailPrice }}</span
              >
              <span class="searchGoodsMainBottomItemPriceRight"
                >￥{{ searchGoodsItem.counterPrice }}</span
              >
            </div>
            <van-tag
              class="searchGoodsMainBottomItemPriceTag"
              size="medium"
              round
              type="primary"
              color="red"
              >满100减50</van-tag
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'SearchGoods'
})
</script>
<script lang="ts" setup>
import { searchStore } from '@/stores/search'
import { storeToRefs } from 'pinia'
import { ref, watch, onMounted} from 'vue'
import cloneDeep from 'lodash/cloneDeep'

// 从store中拿数据
const useSearchStore = searchStore()
//结构store中的分类标签数据以及搜索商品后对应的数据
const { categoryL1List, directlyList } = storeToRefs(useSearchStore)

const heightLight = ref(0)

const changeHeightLight = (index: number) => {
  heightLight.value = index
}

//定义一个数据，用来监听后台数据返回回来时页面数据的变化
const goodsList = ref<any[]>([])
//监听后台数据回来时，遍历商品数据列表的数据
watch(
  directlyList,
  () => {
    goodsList.value = cloneDeep(directlyList.value)
  },
  { immediate: true, deep: true }
)
//定义低价
const minPrice = ref('')
//定义高价
const maxPrice = ref('')

//定义切换价格从低到高以及从高到底的选中状态
//定义切换状态数据
const state = ref('')
//定义点击切换函数
const changeState = (goodsState: string) => {
  state.value = goodsState
}

//定义价格的数据
const allPrice = ref()

//定义点击确定后的逻辑
const onSure = () => {
  //实现价格的排序
  let directlyListData = directlyList.value

  //整理价格的数据
  if (minPrice.value.trim() !== '' && maxPrice.value.trim() !== '') {
    const newGoodsList = directlyListData.filter((item: any) => {
      if (item.retailPrice > minPrice.value && item.retailPrice < maxPrice.value) {
        return item
      }
    })
    directlyListData = newGoodsList
  }
  if (state.value === '1') {
    directlyListData.sort((first: any, last: any) => first.retailPrice - last.retailPrice)
  } else if (state.value === '0') {
    directlyListData.sort((first: any, last: any) => last.retailPrice - first.retailPrice)
  }

  goodsList.value = directlyListData

  //清空搜索过的数据
  minPrice.value = ''
  maxPrice.value = ''
  state.value = ''

  //关闭下拉菜单
  allPrice.value.toggle(false)
}

//点击取消关闭菜单
const offMenu = () => {
  allPrice.value.toggle(false)
}


</script>

<style lang="less" scoped>
.searchGoodsContainer {
  .searchGoodsAll {
    .searchGoodsMain {
      .searchGoodsMainTop {
        // position: sticky;
        // width: 100%;
        // top: 54px;
        // z-index: 999;
      
        .searchGoodsMainInput {
          width: 135px;
          height: 28px;
          text-align: center;
          margin: 0px 3px;
          border: 1px solid gray;
        }
        .searchGoodsMainSpan {
          width: 104px;
          height: 28px;
          border: 1px solid gray;
          text-align: center;
          margin-right: 45px;
          &.active {
            color: red;
            border-color: red;
          }
        }
        .searchGoodsMainButton {
          width: 50%;
          border-top: 1px solid #e7e8e9;
          border-left: 0;
          border-bottom: 0;
          height: 52px;
        }
        .searchGoodsMainButtonright {
          color: red;
        }
        .searchGoodsMainTag {
          margin-top: 20px;
          margin-left: 30px;
          margin-bottom: 5px;
        }
      }
      .searchGoodsMainBottom {
        display: flex;
        flex-wrap: wrap;
        padding-top: 5px;
        .searchGoodsMainBottomItem {
          width: 50%;
          background-color: white;
          padding-left: 10px;
          padding-bottom: 20px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          .searchGoodsMainBottomItemImg {
            width: 90%;
            height: 3.45rem;
            border-radius: 10px;
          }
          .searchGoodsMainBottomItemSpan {
            width: 90%;
            font-size: 14px;
            margin-top: 4px;
          }
          .searchGoodsMainBottomItemPrice {
            .searchGoodsMainBottomItemPriceLeft {
              font-size: 15px;
              color: red;
            }
            .searchGoodsMainBottomItemPriceRight {
              font-size: 11px;
              color: gray;
              text-decoration: line-through;
            }
          }
          .searchGoodsMainBottomItemPriceTag {
            width: 80%;
          }
        }
      }
    }
  }
}
</style>
